@font-face {
  font-family: 'icomoon';
  /* 🧨复制过来后，要注意路径问题 */
  src: url('../fonts/icomoon.eot?tomleg');
  src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?tomleg') format('truetype'),
    url('../fonts/icomoon.woff?tomleg') format('woff'),
    url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^='icon-'],
[class*=' icon-'] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-cheveron-down:before {
  content: '\e91e';
}
.icon-cheveron-left:before {
  content: '\e91f';
}
.icon-cheveron-right:before {
  content: '\e920';
}
.icon-cheveron-up:before {
  content: '\e921';
}
.icon-location1:before {
  content: '\e922';
}
.icon-location-current:before {
  content: '\e923';
}
.icon-mic:before {
  content: '\e924';
}
.icon-angellist:before {
  content: '\e900';
}
.icon-apache:before {
  content: '\e901';
  color: #d22128;
}
.icon-bower:before {
  content: '\e90a';
  color: #ef5734;
}
.icon-circleci:before {
  content: '\e90b';
}
.icon-civicrm:before {
  content: '\e90c';
  color: #81c459;
}
.icon-co-op:before {
  content: '\e902';
  color: #00b1e7;
}
.icon-codacy:before {
  content: '\e903';
}
.icon-codeigniter:before {
  content: '\e904';
  color: #ee4623;
}
.icon-codepen:before {
  content: '\e905';
}
.icon-dell:before {
  content: '\e906';
  color: #007db8;
}
.icon-discourse:before {
  content: '\e907';
}
.icon-discover:before {
  content: '\e908';
  color: #ff6000;
}
.icon-baidu:before {
  content: '\e910';
  color: #2319dc;
}
.icon-bitdefender:before {
  content: '\e911';
  color: #ed1c24;
}
.icon-bitly:before {
  content: '\e912';
  color: #ee6123;
}
.icon-campaignmonitor:before {
  content: '\e913';
  color: #509cf6;
}
.icon-cashapp:before {
  content: '\e914';
  color: #00c244;
}
.icon-castorama:before {
  content: '\e915';
  color: #0078d7;
}
.icon-castro:before {
  content: '\e916';
  color: #00b265;
}
.icon-cevo:before {
  content: '\e917';
  color: #1eabe2;
}
.icon-chase:before {
  content: '\e918';
  color: #117aca;
}
.icon-circle:before {
  content: '\e919';
  color: #8669ae;
}
.icon-circleci1:before {
  content: '\e90d';
}
.icon-co-op1:before {
  content: '\e90f';
  color: #00b1e7;
}
.icon-codacy1:before {
  content: '\e90e';
}
.icon-codecademy:before {
  content: '\e91a';
  color: #1f4056;
}
.icon-codeclimate:before {
  content: '\e91c';
}
.icon-codecov:before {
  content: '\e91d';
  color: #f01f7a;
}
.icon-home2:before {
  content: '\e909';
}
.icon-connection:before {
  content: '\e91b';
}
.icon-phone:before {
  content: '\e942';
}
.icon-phone-hang-up:before {
  content: '\e943';
}
.icon-location:before {
  content: '\e947';
}
.icon-location2:before {
  content: '\e948';
}
.icon-search:before {
  content: '\e986';
}
.icon-volume-increase:before {
  content: '\ea2b';
}
.icon-volume-decrease:before {
  content: '\ea2c';
}
.icon-arrow-up2:before {
  content: '\ea3a';
}
.icon-arrow-right2:before {
  content: '\ea3c';
}
.icon-arrow-down2:before {
  content: '\ea3e';
}
.icon-arrow-left2:before {
  content: '\ea40';
}
.icon-mic1:before {
  content: '\e925';
}
.icon-books:before {
  content: '\e926';
}
.icon-cart:before {
  content: '\e93a';
}
.icon-mobile:before {
  content: '\e958';
}
.icon-mobile2:before {
  content: '\e959';
}
.icon-menu:before {
  content: '\e9bd';
}
.icon-loop2:before {
  content: '\ea2e';
}
.icon-circle-up:before {
  content: '\ea41';
}
.icon-circle-right:before {
  content: '\ea42';
}
.icon-circle-down:before {
  content: '\ea43';
}
.icon-circle-left:before {
  content: '\ea44';
}

.w {
  width: 1200px;
  margin: 0 auto;
}

.shortcut {
  height: 31px;
  line-height: 31px;
  background-color: #f1f1f1;
}

.shortcut-left {
  float: left;
  /* width: 250px; */
  /* height: 31px; */
}
.shortcut-left .red {
  color: #c81623;
}

.shortcut-right {
  float: right;
  /* width: 676px; */
  /* height: 31px; */
  /* text-align: right; */
}
.shortcut-right li {
  display: inline-block;
  /* li标签不要使用右浮动，否则方向会反了 */
}

.shortcut-right .line {
  margin: 0 12px;
}

.header {
  height: 105px;
  padding-top: 25px;
}
.logo {
  float: left;
  width: 178px;
  height: 62px;
}
.logo h1 a {
  /* 文字不要被用户看到 */
  /* font-size: 0; */
  color: transparent;
  /* 给 a 标签转块级，用户点击范围更大 */
  display: block;
  width: 178px;
  height: 62px;
  background: url(../images/logo.png) no-repeat;
}
.search {
  float: left;
  width: 538px;
  height: 66px;
  margin-left: 166px;
}
.search-body {
  width: 538px;
  height: 36px;
}
.search-input {
  float: left;
  padding-left: 10px;
  width: 456px;
  height: 36px;
  border: 2px solid #b1191a;
  background-color: #fff;
  font-size: 14px;
}
.search-button {
  float: left;
  width: 82px;
  height: 36px;
  font-size: 16px;
  color: #fff;
  background-color: #b1191a;
}
.search-footer li {
  display: inline-block;
  line-height: 30px;
  margin: 0 10px;
}

.search-footer li .red {
  color: #c81623;
}

.shopcar {
  float: right;
  width: 140px;
  line-height: 36px;
  text-align: center;
  border: 1px solid #dfdfdf;
  background-color: #f7f7f7;
  margin-right: 62px;
  position: relative;
}
.icon-cart {
  color: #d84a4a;
  margin-right: 5px;
}
.icon-cheveron-right {
  color: #a6a6a6;
}
.shopcar-number {
  position: absolute;
  right: 12px;
  top: -6px;
  width: 16px;
  line-height: 16px;
  color: #fff;
  background-color: #e60012;
  border-radius: 8px 8px 8px 0;
}

/* 3.0 导航栏 */
.nav {
  height: 47px;
  border-bottom: 2px solid #e60012;
  font-size: 16px;
  line-height: 45px;
}
/* 代码搜索 Ctrl+F */
.nav-left {
  float: left;
  width: 209px;
  background-color: #b1191a;
  color: #fff;
  position: relative;
}
.nav-left h3 {
  text-align: center;
  font-weight: 400;
  font-size: 16px;
}

.nav-left .list {
  background-color: #c81623;
  position: absolute;
  width: 209px;
  height: 466px;
}
.nav-left .list li {
  height: 31px;
  line-height: 31px;
  padding: 0 10px;
  font-size: 14px;
}
.nav-left .list li:hover {
  background-color: #fff;
  margin-left: 1px;
}
.nav-left .list li:hover a {
  color: #c81623;
}
.nav-left .list li a {
  float: left;
  color: #fff;
}
.nav-left .list li span {
  float: right;
  color: #fff;
  line-height: 31px;
}
.nav-body {
  float: left;
  padding-left: 20px;
}
.nav-body li {
  float: left;
}
.nav-body li a {
  display: block;
  padding: 0 25px;
  color: #333;
}
.nav-body li .funny {
  font-size: 14px;
}

/* 4.0 页面底部 - 公共的 */
.footer {
  background-color: #f5f5f5;
  height: 414px;
}

.footer-head {
  height: 110px;
  border-bottom: 1px solid #ededed;
}
.footer-head li {
  float: left;
  /* 利用百分比进行等宽分配 */
  width: 20%;
  padding: 30px;
  line-height: 20px;
}
.footer-head li div {
  float: left;
  width: 49px;
  height: 49px;
  margin-right: 10px;
  background: url(../images/icons.png) no-repeat;
}
.footer-head li .icon1 {
  background-position: -253px -3px;
}
.footer-head li .icon2 {
  background-position: -254px -54px;
}
.footer-head li .icon3 {
  background-position: -257px -106px;
}
.footer-head li .icon4 {
  background-position: -258px -157px;
}
.footer-head li .icon5 {
  background-position: -257px -209px;
}
.footer-head li h4 {
  font-size: 14px;
  color: #333;
}

.footer-body {
  height: 188px;
  border-bottom: 1px solid #ededed;
}

.footer-body dl {
  float: left;
  width: 200px;
  padding-left: 50px;
}
.footer-body dl dt {
  font-size: 16px;
  color: #333;
  line-height: 22px;
  margin-bottom: 10px;
  margin-top: 20px;
}

.footer-body dl dd {
  font-size: 12px;
  line-height: 20px;
}

.footer-body dl.wx {
  padding-left: 0;
  text-align: center;
}

.footer-bottom {
  text-align: center;
  line-height: 28px;
  padding-top: 10px;
}
